<template>
  <div id="phone">
    <van-sticky style="background:#fff">
      <div class="nav">
        <img :src="back" alt="" @click="handleBack"/>
        <div class="title">更换手机号</div>
      </div>
    </van-sticky>
    <van-form ref="form">
        <van-field
          v-model.trim="mobile"
          name="手机号码"
          label="新手机号"
          placeholder="请输入手机号码"
          clearable
          autocomplete="off"
          :rules="[{ pattern }]"/>
       <van-field
          v-model.trim="smsCode"
          center
          clearable
          autocomplete="off"
          label="验证码"
          maxlength="6"
          placeholder="请输入验证码"
          :rules="[{ required: true }]"
      >
        <template #button>
          <van-button
              style="background:rgba(242, 150, 0, 1);border:none"
              size="small"
              type="info"
              @click="getSmsCode"
              :disabled="disabled"
          >
            {{ btnMsg }}
          </van-button>
        </template>
      </van-field>
      <div class="footer">
        <van-button class="size" @click="save">确认更换</van-button>
      </div>
    </van-form>
    
  </div>
</template>

<script>
import {userSmsCode,newTestPhone} from "@/api/my";
export default {
    data(){
        return{
          pattern: /^[1][3,4,5,6,7,8,9][0-9]{9}$/,
          back: require("@/assets/my/back.png"),
          mobile: "",
          smsCode: "",
          disabled: false,
          second: 60,
          btnMsg: "获取验证码",
        }
    },
    created(){

    },
    methods:{
      handleBack(){
        // this.$router.go(-1);
        this.$router.push({path:'/accountOrSecurity'})
      },
      // 获取验证码
      getSmsCode(){
        if (this.second != 60) {
          this.$toast.fail(`请于 ${this.second} 秒后重重新获取`);
          return;
        }
        var regExp = new RegExp("^1[3456789]\\d{9}$");
        if (regExp.test(this.mobile)) {
          userSmsCode(this.mobile).then(() => {
                this.$toast.success("验证码发送成功");
                const _this = this;
                const timer = setInterval(() => {
                  _this.second--;
                  if (_this.second) {
                    _this.disabled = true;
                    _this.btnMsg = `倒计时 ${_this.second} 秒`;
                  } else {
                    _this.btnMsg = "获取验证码";
                    _this.disabled = false;
                    _this.second = 60;
                    clearInterval(timer);
                  }
                }, 1000);
              })
              .catch((e) => {
                console.log(e);
          });
        } else {
          this.$toast.fail("请输入正确的手机号");
        }
      },
      save(){
        if (this.mobile && this.smsCode && this.pattern.test(this.mobile)) {
          const data = {
            phone:this.mobile,
            code:this.smsCode
          }
           newTestPhone(data).then(res => {
            if (res.code == 0) {
              this.$toast("更换成功");
              // 发送消息给flutter退出登录
              let message = {
                action: 'logout',
                param: {
                  type: "logout",            //必填
                  name: 'my/settingPhone',
                  callback: 1
                }
              }
            getInfoFromVue.postMessage(JSON.stringify(message))
            } else if (res.code == 1) {
              this.$toast.fail(res.msg);
            }
          })
        }
      }
    }
}
</script>

<style lang="less" scoped>
#phone{
    height: 100vh;
    padding: 0px 15px;
    .nav {
      height: 44px;
      display: flex;
      justify-content: center;
      align-items: center;
      .title{
      font-size: 20px;
      font-weight: 500;
    }

    > img {
      width: 10px;
      height: 16px;
      position: absolute;
      left: 15px;
    }
    }
    .footer {
    display: flex;
    justify-content: center;
    margin-top: 50px;

    .size {
      width: 141px;
      height: 38px;
      opacity: 1;
      border-radius: 19px;
      background: rgba(242, 150, 0, 1);
      font-size: 23px;
      font-weight: 500;
      line-height: 36px;
      color: rgba(255, 255, 255, 1);
      text-align: center;
      vertical-align: top;
    }
    }
     /deep/.van-field__label {
        font-size: 17px;
    }
    /deep/.van-field__control {
       font-size: 17px;
    }
    /deep/.van-button--small {
     font-size: 15px;
    }
    
}
</style>